<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <title>Bootstrap</title>
    <link rel="icon" th:href="@{/vendor/img/reset1.png}" type="image/x-icon"/>
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <script th:src="@{/vendor/jquery/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.js}"></script>
    <!--validationEngine验证-->
    <link rel="stylesheet" type="text/css" th:href="@{/vendor/jquery/formvalidator/css/validationEngine.jquery.css}" />
    <script type="text/javascript" th:src="@{/vendor/jquery/formvalidator/js/jquery.validationEngine.js}"></script>
    <script type="text/javascript" th:src="@{/vendor/jquery/formvalidator/js/jquery.validationEngine-zh_CN.js}"></script>
    <!--datetimepicker-->
    <link type="text/css" th:href="@{/dist/css/timepicker/jquery-ui-1.11.4.css}" rel="stylesheet" />
    <link type="text/css" th:href="@{/dist/css/timepicker/jquery-ui-timepicker-addon.css}" rel="stylesheet" />
    <script type="text/javascript" th:src="@{/vendor/jquery/timepicker/jquery-ui-1.11.4.js}"></script>
    <script type="text/javascript" th:src="@{/vendor/jquery/timepicker/jquery-ui-timepicker-addon.js}"></script>
    <script type="text/javascript" th:src="@{/vendor/jquery/timepicker/jquery-ui-timepicker-zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{/vendor/jquery/jquery.serializejson.js}"></script>
    <!--自定义css-->
    <link rel="stylesheet" type ="text/css" th:href="@{/dist/css/index.css}"/>


    <script type="text/javascript">
        function getUser(){
            console.log($('#defaultForm').serializeJSON());  //返回的是一个Object体
            console.log(JSON.stringify($('#defaultForm').serializeJSON()));  //返回的是JSON字符串
            return JSON.stringify($('#defaultForm').serializeJSON());
        }
    </script>

    <script type="text/javascript">
        var data = getUser();
        var obj = eval("("+data+")");
       // alert(obj.name);

    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#button").on("click", function () {

                var data = getUser();
                alert(data);
                $.ajax({
                    type: "POST",
                    url: "/thymeleaf/usersave",
                    data: data,
                    dataType: "json",
                    contentType: "application/json",
                    success: function (data) {
                        alert(data.msg);
                        if (data.code == 0) {
                            //  layer.closeAll();
                            window.location.href = "../../thymeleaf/userlist";
                        }
                    }
                });
                // if(!$("#defaultForm").validationEngine("validate")){
                // return;
                // }else{

                // }
            })
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <section>
            <div class="page-header">
                <h1>Bootstrap plugin</h1>
            </div>

            <div class="col-lg-12">
                <form id="defaultForm" method="post"  class="form-horizontal">
                    <fieldset>

                        <div class="form-group">
                            <div class="col-lg-6 group">
                                <label class="col-lg-2 control-label" id="username"><i class="color">*</i> 用户名</label>
                                <div class="col-lg-10">
                                    <input  id="name1" name="name" type="text"  class="form-control validate[required,maxsize[15]]"  />
                                </div>
                            </div>
                           <div class="col-lg-6 group">
                                <label class="col-lg-2 control-label"><i class="color">*</i> 曾用名</label>
                                <div class="col-lg-10">
                                    <input  id="name2" type="text" class="form-control validate[required]"  />
                                </div>
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 时间</label>
                            <div class="col-lg-5">
                                <input type="text" name="time" class="form-control ui_timepicker validate[required]" />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 国家</label>
                            <div class="col-lg-5">
                                <select class="form-control validate[required]" name="country">
                                    <option value="">-- Select a country --</option>
                                    <option value="fr">France</option>
                                    <option value="de">Germany</option>
                                    <option value="it">Italy</option>
                                    <option value="jp">Japan</option>
                                    <option value="ru">Russia</option>
                                    <option value="gb">United Kingdom</option>
                                    <option value="us">United State</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 性别</label>
                            <div class="col-lg-5 language">
                                <input type="radio"  id="input1" name="man" class="validate[required]"/>
                                <label for="input1">男</label>
                                <input type="radio"  id="input2" name="man" class="validate[required]"/>
                                <label for="input2">女</label>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 邮件地址</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control validate[required]" name="email" />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 网址</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control validate[required]"  placeholder="http://" />
                            </div>
                        </div>


                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 电话号码</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control validate[required]" name="phoneNumberUK" />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 邮政编码</label>
                            <div class="col-lg-3">
                                <input type="text" class="form-control validate[required]"/>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control validate[required,NummaxSize[6],NumminSize[6]]" name="password"  />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 再次确认密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control validate[required,NummaxSize[6],NumminSize[6]]" />
                            </div>
                        </div>
                    </fieldset>


                    <fieldset>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 年龄</label>
                            <div class="col-lg-3">
                                <input type="text" class="form-control validate[required]" name="age"  />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 语言</label>
                            <div class="col-lg-5 language">
                                <input type="checkbox" value="english" name="label" id="label1" class="validate[required,minCheckbox[2]]"/>
                                <label for="label1">English</label>

                                <input type="checkbox"  value="french" name="label" id="label2" class="validate[required,minCheckbox[2]]"/>
                                <label for="label2">French</label>

                                <input type="checkbox"  value="german" name="label" id="label3" class="validate[required,minCheckbox[2]]"/>
                                <label for="label3">German</label>

                                <input type="checkbox" value="russian" name="label" id="label4" class="validate[required,minCheckbox[2]]"/>
                                <label for="label4">Russian</label>

                                <input type="checkbox"  value="other" name="label" id="label5" class="validate[required,minCheckbox[2]]"/>
                                <label for="label5">Other</label>
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label"><i class="color">*</i> 详情</label>
                            <div class="col-lg-5 language">
                                <textarea  rows="10" class="form-control textarea validate[required]" placeholder='请留言'></textarea>
                            </div>
                        </div>
                    </fieldset>
                </form>
                <div class="form-group group">
                    <div class="col-lg-9 col-lg-offset-3">
                        <input type="button" class="btn btn-primary" id="button" value="Submit"  />
                    </div>
                </div>
            </div>
        </section>
    </div>




</div>



<!--<form id="defaultForm">-->
<!--<div style="position: relative">-->
<!--<input type="radio" name="nan" class="validate[required]">男-->
<!--<input type="radio" name="nan" class="validate[required]">女-->
<!--</div>-->
<!--&lt;!&ndash;<input type="radio"  id="input1" class="validate[required[]]"/>&ndash;&gt;-->
<!--&lt;!&ndash;<label for="input1">男</label>&ndash;&gt;-->
<!--&lt;!&ndash;<input type="radio"  id="input2" class="validate[required[]]"/>&ndash;&gt;-->
<!--&lt;!&ndash;<label for="input1">女</label>&ndash;&gt;-->
<!--</form>-->
<!--<input type="button" id="button" value="提交">-->
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $("#defaultForm").validationEngine({
            validationEventTriggers:"blur",  // 触发的事件
            // validationEventTriggers:"keyup
            // blur",
            maxErrorsPerField:1,
            inlineValidation: true,// 是否即时验证，false为提交表单时验证,默认true
            success :  false,// 为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false
            promptPosition: "bottomLeft"// 提示所在的位置，topLeft, topRight, bottomLeft,
            // centerRight, bottomRight
//			         failure : function() { alert("验证失败，请检查。"); },//验证失败时调用的函数
//			         success : function() { callSuccessFunction() }//验证通过时调用的函数
        });

        $(".ui_timepicker").datetimepicker({
            defaultDate: $('.ui_timepicker').val(),
            dateFormat: "yy-mm-dd",
            showSecond: true,
            timeFormat: 'hh:mm:ss',
            stepHour: 1,
            stepMinute: 1,
            stepSecond: 1
        })
    });
</script>

</html>